<template>
  <div>
    <div class="product">
      <HeaderTop :title="'Product List'" :backUrl="backUrl" :backColor="backColor" :color="color" :backIconType="backIconType">
      </HeaderTop>
      <div class="list-wrap">
        <PullRefresh v-model="loading" @refresh="onRefresh">
          <productListCom ref="productList" :pageTrackerInfo="pageTrackerInfo" />
        </PullRefresh>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from '@/components/header-top';
import Product from './components/product';
import { PullRefresh } from 'vant';
import productListCom from './components/productListCom'
export default {
  components: {
    HeaderTop,
    Product,
    PullRefresh,
    productListCom
  },
  data() {
    return {
      loading: false,
      backUrl: '',
      pageTrackerInfo: {
        page: 'list',
        startTime: new Date().getTime()
      },
      backColor: 'transparent',
      backIconType: 'white',
      color: '#fff',
    };
  },
  methods: {
    onRefresh() {
      setTimeout(async () => {
        await this.$refs.productList.getProductList({})
        this.loading = false
      }, 1000);
    },
    getScrollTop () {
      const st = window.scrollY || document.documentElement.scrollTop
      const bol = st === 0
      this.backColor = bol ? 'transparent' : '#f5f5f5'
      this.backIconType = bol ? 'white' : 'black'
      this.color = bol ? '#fff' : '#000'
    }
  },
  created() {
    // 双旦活动路由处理
    const { form } = this.$route.query;
    if (form === 'doubledan') this.backUrl = '';
  },
  beforeDestry () {
    this.pageEndAction()
    window.removeEventListener('scroll', this.getScrollTop);
  },
  mounted () {
    window.addEventListener('scroll', this.getScrollTop);
    this.pageStartAction()
    this.$buryPoint.action({
      eventName: 'list_page_show',
      ...this.pageTrackerInfo
    });
  }
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>